<!-- 防火阀 | 通用-->
<template>
  <a-modal
    v-if="show"
    :visible="show"
    :mask-closable="false"
    :title="title"
    :footer="null"
    width="600px"
    @cancel="closeHandle"
  >
    <a-tabs animated hide-add size="small" type="card">
      <a-tab-pane v-if="showTab" key="1" tab="设备控制">
        <div class="row">
          <span>控制状态：</span>
          <a-radio-group
            v-model:value="value"
            name="radioGroup"
            @change="onChange"
          >
            <a-radio :value="node.value" v-for="(node, i) in options">{{
              node.name
            }}</a-radio>
          </a-radio-group>
        </div>
      </a-tab-pane>
      <a-tab-pane key="2" tab="设备状态">
        <div v-for="(n, i) in mockList" :key="i" class="node-list">
          <a-space class="flex justify-between">
            <span>{{ n.name }}</span>
            <div class="bgn">{{ n.status }}</div>
          </a-space>
        </div>
      </a-tab-pane>
      <a-tab-pane key="3" tab="设备信息">
        <div class="row">
          <span>设备名称：</span>
          <span>{{ data.deviceName }} {{ data.deviceCode }}</span>
        </div>
        <div class="row">
          <span>设备代码：</span>
          <span>OGLLFASX_DHFX021</span>
        </div>
        <div class="row">
          <span>安装位置：</span>
          <span>桂林路</span>
        </div>
        <div class="row">
          <span>图纸代码：</span>
          <span></span>
        </div>
        <div class="row">
          <span>位置信息：</span>
          <span></span>
        </div>
      </a-tab-pane>
    </a-tabs>
  </a-modal>
</template>
<script setup>
import { ref, computed, watch } from "vue";
import { userStore } from "@/store/modules/userStore";
const emit = defineEmits(["update:show"]);
const store = userStore();
const props = defineProps({
  data: {
    type: Object,
    required: true,
    default: () => ({}),
  },
  show: {
    type: Boolean,
    required: true,
    default: false,
  },
});

const title = computed(() => {
  return (
    "桂林路-" +
    (props.data.deviceName || "冷水机组") +
    (props.data.deviceCode || "LDS/LS-A1")
  );
});

const value = ref("1");

watch(
  () => props.show,
  (show) => {
    if (show) {
      const modules = store.getOperateList.filter(
        (v) => v.currentComName === store.getCurrentComName
      );
      if (modules.length) {
        let exist = modules.find((v) => v.index === props.data.index);
        value.value = exist ? "2" : "1";
      }
    } else {
    }
  },
  {
    immediate: true,
  }
);
const showTab = computed(() => {
  if (
    props.data.deviceName === "非电动防烟防火阀" ||
    props.data.deviceName === "电动防烟防火阀" ||
    props.data.deviceName === "风机" ||
    props.data.deviceName === "空调" ||
    props.data.deviceName === "自动扶梯" ||
    props.data.deviceName === "风阀"
  ) {
    return true;
  }
  return false;
});

const options = computed(() => {
  if (props.data.deviceName === "风机") {
    if (props.data.deviceCode.indexOf("TVF/") > -1) {
      return [
        {
          name: "正转控制",
          value: "zhengzhuan",
        },
        {
          name: "反转控制",
          value: "fanzhuan",
        },
        {
          name: "停止控制",
          value: "1",
        },
      ];
    } else if (props.data.deviceCode.indexOf("UOF/") > -1) {
      return [
        {
          name: "运行控制",
          value: "1",
        },
        {
          name: "停止控制",
          value: "2",
        },
        {
          name: "变频启动控制",
          value: "showbian",
        },
        {
          name: "变频停止控制",
          value: "hidebian",
        },
      ];
    } else if (props.data.deviceCode.indexOf("TK/") > -1) {
      return [
        {
          name: "变频启动控制",
          value: "showbian",
        },
        {
          name: "变频停止控制",
          value: "hidebian",
        },
      ];
    } else {
      return [
        {
          name: "开控制",
          value: "1",
        },
        {
          name: "关控制",
          value: "2",
        },
      ];
    }
  } else {
    return [
      {
        name: "开控制",
        value: "1",
      },
      {
        name: "关控制",
        value: "2",
      },
    ];
  }
});
const mockList = computed(() => [
  {
    name: `${props.data.deviceName}${props.data.deviceCode}监视（L04M012)"`,
    status: "正常",
  },
  {
    name: `${props.data.deviceName}${props.data.deviceCode}监视（L04M012)"`,
    status: "正常",
  },
  {
    name: `${props.data.deviceName}${props.data.deviceCode}监视（L04M012)"`,
    status: "正常",
  },
]);
const closeHandle = () => {
  emit("update:show", false);
};
function onChange() {
  if (value.value === "1") {
    //启动
    store.changeOperateListRemove({
      index: props.data.index,
      currentComName: props.data.currentComName,
    });
  } else if (value.value === "2") {
    //停止
    store.changeOperateList({
      index: props.data.index,
      currentComName: props.data.currentComName,
    });
  } else {
    //显示变 隐藏变  正转 反转
    store.changeOperateList({
      index: props.data.index,
      currentComName: props.data.currentComName,
      type: value.value,
    });
  }
}
</script>
<style scoped lang="less">
.row {
  display: flex;
  flex-flow: row nowrap;
  height: 40px;
  line-height: 40px;
  span {
    margin-right: 6px;
  }
}

:deep(.ant-radio-group) {
  display: flex;
  align-items: center;
}

.node-list {
  height: 40px;
  line-height: 40px;
}
.bgn {
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid rgb(240, 240, 240);
  padding: 0 10px;
  height: 30px;
  border-radius: 4px;
}
</style>
